<template>
  <div class="container">
    <div class="banner">
      <div class="nav">
        <div class="nav-warp">
          <div class="btn-left">
            <div class="home">首页</div>

            <nuxt-link to="/dataQuery">
              <div class="data-serch">数据查询</div>
            </nuxt-link>
          </div>
          <div class="btn-right">
            <div class="to-login">
              <nuxt-link to="/login">
                <span style="color: #263c92">登录&nbsp; |</span>
                <span style="color: #fe721d">&nbsp; 注册</span></nuxt-link
              >
            </div>
          </div>
        </div>
      </div>
      <div class="banner-img"></div>
    </div>
    <div class="warp">
      <div class="title-nav">
        <div class="title">智能门锁产业集群分布情况</div>
        <div class="title ml">智能门锁产业功能类型</div>
      </div>
      <div class="echast">
        <div class="item ss" ref="pointA">
          <div id="pointA"></div>
        </div>

        <div class="item ml">
          <img src="../assets/images/a.png" alt="" style=" height: 100%" />
        </div>
      </div>
      <div class="title-nav2">智能门锁产业功能类型</div>
      <div class="columnar">
        <div id="columnar"></div>
      </div>
      <div class="title-nav">
        <div class="title">智能门锁离合技术应用情况</div>
        <div class="title ml">智能门锁锁体应用情况</div>
      </div>
      <div class="echast">
        <div class="item ss left" redf="pointA">
          <div id="left"></div>
        </div>
        <div class="item ml right">
          <div id="right"></div>
        </div>
      </div>
    </div>
    <pageFooter></pageFooter>
  </div>
</template>

<script>
// import { Chart, Tooltip, Edge, View, Polygon, Coord } from "viser-vue";

import pageFooter from "./components/footer";

export default {
  components: {
    pageFooter
  },
  data() {
    return {
      point: [
        {
          item: "杭州",
          count: 40,
          percent: 0.4
        },
        {
          item: "温州",
          count: 21,
          percent: 0.21
        },
        {
          item: "深圳",
          count: 17,
          percent: 0.17
        },
        {
          item: "广州",
          count: 13,
          percent: 0.13
        },
        {
          item: "中山",
          count: 9,
          percent: 0.09
        }
      ],
      data2: [
        {
          name: "生物识别",
          vote: 35654
        },
        {
          name: "电子识别",
          vote: 65456
        },
        {
          name: "机械识别",
          vote: 45724
        },
        {
          name: "网络开启",
          vote: 13654
        },
        {
          name: "信息推送",
          vote: 13654
        },
        {
          name: "电子钥匙",
          vote: 13654
        },
        {
          name: "猫眼功能",
          vote: 13654
        },
        {
          name: "门铃功能",
          vote: 13654
        },
        {
          name: "授权功能",
          vote: 13654
        },
        {
          name: "其他",
          vote: 2314
        }
      ],
      data3: [
        {
          name: "前置离合",
          vote: 1879
        },
        {
          name: "中置离合",
          vote: 3479
        },
        {
          name: "后置离合",
          vote: 2379
        }
      ],
      data4: [
        {
          name: "机械锁体",
          vote: 2879
        },
        {
          name: "电子锁体",
          vote: 1479
        },
        {
          name: "电动锁体",
          vote: 3379
        }
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      let Charts = this.$g2.G2.Chart;
      var chart = new this.$g2.G2.Chart({
        container: "pointA",
        forceFit: true,
        width: document.querySelector(".ss").clientWidth,
        height: document.querySelector(".ss").clientHeight,
        animate: false
      });
      chart.source(this.point, {
        percent: {
          formatter: function formatter(val) {
            val = val * 100 + "%";
            return val;
          }
        }
      });
      chart.coord("theta", {
        radius: 0.75,
        innerRadius: 0.6
      });
      // chart.tooltip({
      //   showTitle: false,
      //   itemTpl:
      //     '<li><span style="background-color:#f00;" class="g2-tooltip-marker"></span>{name}: {value}</li>',
      // });
      var interval = chart
        .interval()
        .position("percent")
        .color("item")
        .label("percent", {
          formatter: function formatter(val, item) {
            return item.point.item + ": " + val;
          }
        })
        .tooltip("item*percent", function(item, percent) {
          percent = percent * 100 + "%";
          return {
            name: item,
            value: percent
          };
        })
        .style({
          lineWidth: 1,
          stroke: "#fff"
        });
      chart.render();
      var bar = new this.$g2.G2.Chart({
        container: "columnar",
        forceFit: true,
        width: document.querySelector(".columnar").clientWidth,
        height: document.querySelector(".columnar").clientHeight,
        padding: [60, 20, 40, 60]
      });
      bar.source(this.data2, {
        vote: {
          min: 0
        }
      });
      bar.legend(false);
      bar.axis("vote", {
        labels: null,
        title: null,
        line: null,
        tickLine: null
      });
      bar
        .interval()
        .position("name*vote")
        .color("name", ["#7f8da9", "#fec514", "#db4c3c", "#daf0fd"]);
      bar.render();

      var bar = new this.$g2.G2.Chart({
        container: "left",
        forceFit: true,
        width: document.querySelector(".left").clientWidth,
        height: document.querySelector(".left").clientHeight,
        padding: [60, 20, 40, 60]
      });
      bar.source(this.data4, {
        vote: {
          min: 0
        }
      });
      bar.legend(false);
      bar.axis("vote", {
        labels: null,
        title: null,
        line: null,
        tickLine: null
      });
      bar
        .interval()
        .position("name*vote")
        .color("name", ["#daf0fd", "#7f8da9", "#fec514", "#db4c3c", "#daf0fd"]);
      bar.render();

      var bar = new this.$g2.G2.Chart({
        container: "right",
        forceFit: true,
        width: document.querySelector(".right").clientWidth,
        height: document.querySelector(".right").clientHeight,
        padding: [60, 20, 40, 60]
      });
      bar.source(this.data2, {
        vote: {
          min: 0
        }
      });
      bar.legend(false);
      bar.axis("vote", {
        labels: null,
        title: null,
        line: null,
        tickLine: null
      });
      bar
        .interval()
        .position("name*vote")
        .color("name", ["#7f8da9", "#fec514", "#db4c3c", "#daf0fd"]);
      bar.render();
    });
  }
};
</script>
<style scoped>
.container {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.banner {
  width: 100%;
  height: 704px;
  box-sizing: border-box;
  /* background: url("../assets/images/banner.png") no-repeat; */
  background-size: cover;
}
.banner-img {
  width: 100%;
  height: 604px;
  background: url("../assets/images/banner.png") no-repeat center/100%;
}
.nav {
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  padding-right: 320px;
  padding-left: 320px;
  display: flex;
  justify-content: flex-end;
  background: #313131;
}

.nav-warp {
  /* width: calc(100% - 565px); */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}

.btn-left {
  display: flex;
  margin-right: 200px;
  align-items: center;
}
.home {
  font-family: MicrosoftYaHei-Bold;
  width: 135px;
  height: 44px;
  background: #263c92;
  border-radius: 4px;
  font-weight: bold;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
}
.data-serch {
  width: 135px;
  cursor: pointer;
  height: 44px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.to-login {
  width: 135px;
  height: 59px;
  font-family: Microsoft YaHei;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.warp {
  width: 100%;
  height: 100%;
  padding-right: 320px;
  padding-left: 320px;
  box-sizing: border-box;
}

.title-nav {
  width: 100%;
  display: flex;
}

.title {
  width: 606px;
  height: 80px;
  font-family: MicrosoftYaHei-Bold;
  font-weight: bold;
  color: #222222;
  font-size: 24px;
  display: flex;
  align-items: flex-end;
}

.ml {
  margin-left: 70px;
}

.echast {
  width: 100%;
  display: flex;
  margin-top: 60px;
}

.item {
  width: 606px;
  height: 422px;
  background: #ffffff;
  box-shadow: 0px 12px 106px 0px rgba(38, 60, 146, 0.13);
  border-radius: 4px;
}
.title-nav2 {
  width: 100%;
  height: 80px;
  display: flex;

  align-items: flex-end;
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #222222;
}

.columnar {
  width: 100%;
  height: 356px;
  margin-top: 70px;
}

.ban {
  width: 100%;
  height: calc(100% - 105px);
  margin-top: 23px;
}
.ban img {
  width: 100%;
  height: 100%;
}
</style>
